<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备视图-运行监测</title>
    <meta name="description" content="Description">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    $[_commoncss]$ $[_layoutcss]$
    <link rel="stylesheet" href="../dp-terminal-details-dialog2/index.css">
    <link rel="stylesheet" href="../../framework/swiper@7.3.1/swiper-bundle.min.css">
    <link rel="stylesheet" href="https://static.test.agrionline.cn/tp-ui/web/3.0/chartlib/chartlib-ui.min.css">
    <link rel="stylesheet" href="./index.css">
    $[_commonjs]$ $[_layoutjs]$

    <!--页面js-->    
    <script src="../../framework/swiper@7.3.1/swiper-bundle.min.js"></script>
    <script src="../../framework/echarts@5.3.0/echarts.min.js"></script>
    <script src="../../framework/echarts@5.3.0/echarts-gl.min.js"></script>
    <script src="../../framework/moment.js@2.24.0/moment.min.js"></script>
    <script src="../../framework/konva@4.0.0/konva.min.js"></script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=7719646a546948320812014ab6497b4e&plugin=Map3D,AMap.DistrictSearch,AMap.GeoJSON"></script>
    <script src="https://static.test.agrionline.cn/tp-ui/web/3.0/chartlib/chartlib-ui.min.js"></script>
    <script src="../../resources/js/lonlat-tranform.js"></script>
    <script src="../../resources/js/utils.js"></script>
    <script src="../dp-layout/dp-constant.js"></script>
    <script src="./index-component.js"></script>
    <script src="./index-charts.js"></script>
    <script src="./xkx-big.js"></script>
    <script src="./index.js"></script>
    <script src="../dp-terminal-details-dialog2/index.js"></script>
    <script src="../dp-terminal-details-dialog2/isc/isc-video-player.js"></script>
</head>

<body>
    <!--项目中公共的布局组件-->
    <div id="app" v-cloak>
        <!-- 头部 -->
        <head-component></head-component>
        <!-- 地图 -->
        <div id="map-container"></div>
        <!-- 地图项目点位搜索 -->
        <div class="map-project-marker-search">
            <el-select clearable style="width: 100%;" @change="getProjectTerminalList" v-model="markerSearchValue" filterable placeholder="请输入项目名称">
                <el-option v-for="item in projectList" :key="item.project_id" :label="item.project_name" :value="item.project_id">
                </el-option>
            </el-select>
        </div>
        <!-- 蒙层 -->
        <div class="page-mask-img">
            <img src="./img/mc.png" alt="">
        </div>

        <!-- 左侧内容 -->
        <div class="page-left-content">
            <!-- 设备情况分析 -->
            <div class="equipment-situation-analysis">
                <content-title title="设备情况分析">
                    <div class="equipment-box" v-loading="equipmentLoading">
                        <div id="equipment-box-chart" v-if="equipmentSituationData.length"></div>
                        <div class="equipment-box-head" v-if="equipmentSituationData.length">
                            <span>状态</span>
                            <span>数量</span>
                            <span>占比</span>
                        </div>
                        <no-data-t :loading="equipmentLoading" v-show="!equipmentSituationData.length"></no-data-t>
                    </div>
                </content-title>
            </div>
            <!-- 监测站点类型分布 -->
            <div class="monitoring-site-distribution">
                <monitoring-site-distribution :project-terminal-list="equipmentSituationData" :loading="equipmentLoading"></monitoring-site-distribution>
            </div>
            <!-- 设备信息 -->
            <div class="device-info-box">
                <device-info :project-id="markerSearchValue" :project-terminal-list="equipmentSituationData" :loading="equipmentLoading"></device-info>
            </div>
        </div>
        
        <!-- 中间顶部内容 -->
        <div class="page-top-content">
            <div class="page-top-content-box">
                <img src="./img/xmzs.png" alt="">
                <p>
                    <span>接入项目总数</span>
                    <span>{{projectList.length}}</span>
                </p>
            </div>
            <div class="page-top-content-box">
                <img src="./img/sbzs.png" alt="">
                <p>
                    <span>接入设备总数</span>
                    <span>{{equipmentSituationData.length}}</span>
                </p>
            </div>
            <div class="page-top-content-box">
                <img src="./img/yjcs.png" alt="">
                <p>
                    <span>共预警次数</span>
                    <span>{{problemHandleTotal}}</span>
                </p>
            </div>
        </div>

        <!-- 中间底部内容 -->
        <div class="page-bottom-content">
            <site-monitoring :project-terminal-list="equipmentSituationData" :project-id="markerSearchValue" :project-list="projectList"></site-monitoring>
        </div>
        
        <!-- 右侧 -->
        <div class="page-right-content">
            <!-- 最新预警 -->
            <div class="right-page-haflt-content">
                <new-warning :project-ids="projectIds"></new-warning>
            </div>
            <!-- 设备报警类型趋势 -->
            <div class="right-page-haflt-content">
                <device-alarm-trend :project-ids="projectIds"></device-alarm-trend>
            </div>
            <!-- 问题处理情况 -->
            <div class="right-page-haflt-content">
                <problem-handle :project-ids="projectIds"></problem-handle>
            </div>
        </div>
        
        <!-- 地图窗体 -->
        <div ref="infoWindow" class="page-infoWindow-box">
            <p>{{infoWindowInfo.project_name}}</p>
            <div class="page-infoWindow-content" v-show="infoWindowInfo.deviceData && infoWindowInfo.deviceData.length">
                <p v-for="(item,index) in infoWindowInfo.deviceData" :key="index">
                    {{item.name}}：{{item.nums}}
                </p>
            </div>
        </div>
        <!--终端相关弹框-->
        <dp-mark-dialog :visible.sync="markerData.visible" :param="markerData.params"></dp-mark-dialog>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            mixins: [pageConf]
        });
    </script>
</body>

</html>